<template>
	<view class="team clearfix">
		<image src="/static/my/team.png" class="teambg" mode=""></image>
		<cu-custom bgColor="bg-transparent text-white" isBack>
			<block slot="content">我的团队</block>
		</cu-custom>
		<view class="bg-white team-top mx15 radius-5 py15 flex flex-direction px15">
			<view class="flex align-center">
				<image :src="headImg" class="block60 round" mode=""></image>
				<view class="flex flex-direction ml10">
					<text>ID：{{id}}</text>
					<text>手机号：{{tel}}</text>
				</view>
			</view>
			<view class="flex align-center wp100 mt15">
				<view class="wp33 text-center"><text>{{vipName}}</text></view>
				<view class="wp33 text-center"><text>{{teamGongxian}}</text></view>
				<view class="wp33 text-center"><text>{{teamCount}}</text></view>
			</view>
			<view class="flex align-center wp100 mt15">
				<view class="wp33 text-center"><text>级别</text></view>
				<view class="line-team"></view>
				<view class="wp33 text-center"><text>团队业绩</text></view>
				<view class="line-team"></view>
				<view class="wp33 text-center"><text>人数</text></view>
			</view>
		</view>
		<scroll-view class="scroll-view team mt15"  scroll-y @scrolltolower="OnReachBottom">
			<view class="flex  align-center justify-between bg-white py15 mx15">
				<view class="wp25 text-info discenter">用户名</view>
				<view class="wp25 text-info discenter">级别</view>
				<view class="wp25 text-info discenter">业绩</view>
				<view class="wp25 text-info discenter">时间</view>
			</view>
			<view class="flex flex-direction mx15 bg-white ">
				<view class="flex align-center justify-between py10" v-for="(item, index) in List" :key="index">
					<view class="wp25 discenter">{{item.id}}</view>
					<view class="wp25 discenter">{{item.vipName}}</view>
					<view class="wp25 discenter">{{item.teamGongxian}}</view>
					<view class="wp25 discenter">{{item.addTime}}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
	data() {
		return {
			id:'',
			tel:'',
			niName:'',
			vipName:'',
			headImg:'',
			teamGongxian:'0.00',
			teamCount:'0'
		}
	},
	onLoad(e) {
		this.getData()
	},
	methods: {
		OnReachBottom(){
			this.getData()
		},
		async getData() {
			if (this.finish) return
			let {
				data: {teamUsers,vipName,headImg,id,tel,teamGongxian,teamCount }
			} = await this.$http.post('user.team', { page: this.page,limit:20 })
			if (this.page == 1) {
				this.vipName=vipName
				this.headImg=headImg
				this.id=id
				this.tel=tel
				this.teamGongxian=teamGongxian
				this.teamCount=teamCount
			}
			this.finish = teamUsers.length < 20
			!this.finish && (this.page += 1)
			this.List = [...this.List, ...teamUsers]
		},
	}
}
</script>

<style lang="less">
.team-top{
	position: relative;
	z-index: 1;
	margin-top: calc(var(--status-bar-height) + 180rpx);
}
.teambg{
	width: 100%;
	height: 400rpx;
	position: fixed;
	top: 0;
}
.line-team{
	width: 2rpx;
	height: 40rpx;
	background-color: #dedede;
}
.wp33{
	width: calc(33.3% - 1rpx);
}
</style>
